<template>
  <div>
    <Form ref="formContact" :model="formContact" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name">
            <Input v-model="formContact.name" style="width: 260px"></Input>
        </FormItem>
        <FormItem label="职位" prop="position">
            <Input v-model="formContact.position" style="width: 260px"></Input>
        </FormItem>
        <FormItem label="手机" prop="mobile">
            <Input v-model="formContact.mobile" style="width: 260px"></Input>
        </FormItem>
        <FormItem label="邮件" prop="email">
            <Input v-model="formContact.email" style="width: 260px"></Input>
        </FormItem>
        <FormItem label="QQ" prop="qq">
            <Input v-model="formContact.qq" style="width: 260px"></Input>
        </FormItem>
        <FormItem label="地址" prop="address">
            <Input v-model="formContact.address" style="width: 260px"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" :loading="loading" @click="handleSubmit('formContact')">保存</Button>
        </FormItem>
    </Form>
  </div>
</template>

<script>
import { _getContact, _contactSave } from '@/api/system.js'
export default {
  name: 'Contact',
  props: {
    id: {
      type: Number,
      default: 0
    },
  },
  data () {
      return {
          defaultData: null,
          loading: false,
          formContact: {
            name: '',
            position: '',
            mobile: '',
            email: '',
            qq: '',
            address: ''
          },
          ruleValidate: {
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                email: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    { type: 'email', message: '邮件格式不正确', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
          }
      }
  },
  watch: {
        'id'(){
            if (this.id == 0) {
                this.formContact = JSON.parse(JSON.stringify(this.defaultData));
            }else {
                this.getContact()
            }

        }
    },
  computed: {
    
  },
  methods: {
        getContact() {
            const msg = this.$Message.loading({
                content: 'Loading...',
                duration: 0
            });
            _getContact({id: this.id}).then( res => {
                this.formContact = res.data.data
                this.$Message.destroy()
            })
        },
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true
                    // 请求
                    const _this = this
                    _contactSave(this.formContact).then( res => {
                        const obj = res.data
                        if (obj.status == 1) {
                            this.$Message.success(obj.msg)
                            this.$emit('sendId', obj.data)
                        }else {
                            this.$Message.error(obj.msg);
                        }
                        this.loading = false
                    })

                } else {
                    this.$Message.error('请填写必填项');
                }
            })
        },
  },
    created() {
        this.defaultData = JSON.parse(JSON.stringify(this.formContact));
    },
  mounted () {
    //   this.getContact()
  }
}
</script>

<style scoped>
</style>
